<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>登陆</title>
    <style>
        * { margin: 0; padding: 0; }
        html { height: 100%; }
        body { height: 100%; background: #fff url(images/backgroud.png) 50% 50% no-repeat; background-size: cover;}
        .dowebok { position: absolute; left: 50%; top: 50%; width: 430px; height: 550px; margin: -300px 0 0 -215px; border: 1px solid #fff; border-radius: 20px; overflow: hidden;}
        .logo { width: 104px; height: 104px; margin: 50px auto 80px; background: url(images/login.png) 0 0 no-repeat; }
        .form-item { position: relative; width: 360px; margin: 0 auto; padding-bottom: 30px;}
        .form-item input { width: 288px; height: 48px; padding-left: 70px; border: 1px solid #fff; border-radius: 25px; font-size: 18px; color: #fff; background-color: transparent; outline: none;}
        .form-item button { width: 360px; height: 50px; border: 0; border-radius: 25px; font-size: 18px; color: #1f6f4a; outline: none; cursor: pointer; background-color: #fff; }
        #email { background: url(images/emil.png) 20px 14px no-repeat; }
        #password { background: url(images/password.png) 23px 11px no-repeat; }
        .tip { display: none; position: absolute; left: 20px; top: 52px; font-size: 14px; color: #f50; }
        .reg-bar { width: 360px; margin: 20px auto 0; font-size: 14px; overflow: hidden;}
        .reg-bar a { color: #fff; text-decoration: none; }
        .reg-bar a:hover { text-decoration: underline; }
        .reg-bar .reg { float: left; }
        .reg-bar .admin{float: left;margin-left: 20px;}
        .reg-bar .forget { float: right; }
        .reg-bar .phone{float:left;margin-left: 10px;}
        .dowebok ::-webkit-input-placeholder { font-size: 18px; line-height: 1.4; color: #fff;}
        .dowebok :-moz-placeholder { font-size: 18px; line-height: 1.4; color: #fff;}
        .dowebok ::-moz-placeholder { font-size: 18px; line-height: 1.4; color: #fff;}
        .dowebok :-ms-input-placeholder { font-size: 18px; line-height: 1.4; color: #fff;}
		.admin{}
        @media screen and (max-width: 500px) {
            * { box-sizing: border-box; }
            .dowebok { position: static; width: auto; height: auto; margin: 0 30px; border: 0; border-radius: 0; }
            .logo { margin: 50px auto; }
            .form-item { width: auto; }
            .form-item input, .form-item button, .reg-bar { width: 100%; }
        }
    </style>
</head>
<body>
    <div class="dowebok">
    	<form id="login_form">
        <div class="logo"></div>
        <div class="form-item">
            <input id="email" name="email" type="text" autocomplete="off" placeholder="邮箱">
            <p class="tip" id="tip1">请输入合法的邮箱地址</p>
        </div>
        <div class="form-item">
            <input id="password" name="password" type="password" autocomplete="off" placeholder="登录密码">
            <p class="tip" id="tip2">密码不合法</p>
        </div>
        </form>
        <div class="form-item"><button type="button" id="login">登陆</button></div>
        <div class="reg-bar">
            <a class="reg" href="regin.html" target="_blank">立即注册</a>
            <a class="admin" href="admin.html" >管理人员点此登陆</a>
            <a class="forget" href="forget.html" target="_blank">忘记密码</a>
            <a class="phone" href="login_phone.html" target="_blank">手机登陆(测试)</a>
            <p style="color:lightgreen;text-align: center;">注:手机登陆接口已经实现，没有实际登陆功能，仅作预览</p>
        </div>
    </div>
    <script src="js/jquery-3.3.1.js"></script>
   	<script type="text/javascript" src="layer/layer.js"></script>
    <script>
        $(function () {
        	$("#email").blur(function(){
        		//email的blur
				var email_t=/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
        		if(!email_t.test($("#email").val())){
        			$("#tip1").show();
        			return false;
			}else{
				$("#tip1").css("display","none");
				return true;
			}});//email的blur的function括号
        	
			$("#password").blur(function() {
        		//password的blur验证
        		var pwd=/^[A-Za-z]+[0-9]+[A-Za-z0-9]*|[0-9]+[A-Za-z]+[A-Za-z0-9]*$/;
        		if(!pwd.test($("#password").val())){
        			$("#tip2").show();
        			return false;
        		}else{
        			$("#tip2").css("display","none");
    				return true;
        		}
			});//password的blur的function的括号
			
			$("#login").click(function() {
				//login的点击事件
				var email_t=/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
        		if(!email_t.test($("#email").val())){
        			$("#tip1").show();
        			return false;
        		}
        		//点击登陆按钮的邮箱二次验证
        		var pwd=/^[A-Za-z]+[0-9]+[A-Za-z0-9]*|[0-9]+[A-Za-z]+[A-Za-z0-9]*$/;
        		if(!pwd.test($("#password").val())){
        			$("#tip2").show();
        			return false;
        		}
				//点击登陆按钮的密码二次验证
				$.ajax({
        			url:'login',
        			type:'post',
        			data:$("#login_form").serialize(),
        			async:'false',
        			contentType:'application/x-www-form-urlencoded; charset=UTF-8',
        			success:function(data){
        				var obj=JSON.parse(data);
        				if (obj.code=="0000") {
        					// 验证成功--验证session中是否存在该账户
        					$.get("a.getsession",{email:$('#email').val()},function(data){
								if(JSON.parse(data).code=="0001"){
									layer.msg("账户已登录！请稍后再试");
								}else{
									layer.msg("登陆成功");
									// 登陆成功商品网站主页
									location.href="index.html";
								}
							})
						}else if(obj.code=="0004"){
							layer.msg("账号或者密码不正确");
						}else if(obj.code=="0003"){
							layer.msg("账号不存在");
						}else{
							layer.msg("未知的错误");
						}
        			},
        			error:function(){
        				layer.msg("error");
        			}
				});
				
			});//login的function的括号
			
        })//最外层的function的括号
    </script>
</body>
</html>